<template>
  <div>
    <formula :isBtn="false">
      <span class="vhtml" v-html="showContent"></span>
    </formula>
    <div class="ab">
      <div class="a">时差公式：</div>
      <div class="b">
        <el-select
          size="small"
          style="width: 150px"
          v-model="firstDateProp"
          placeholder="请选择时间范围"
        >
          <template v-for="(item, i) in cols">
            <template v-if="item.column">
              <el-option
                v-for="(childItem, j) in item.column"
                :key="j"
                :label="`${item.label}.${childItem.label}`"
                :value="`${item.prop}.${childItem.prop}`"
              />
            </template>
            <template v-else>
              <el-option :key="i" :label="item.label" :value="item.prop" />
            </template>
          </template>
        </el-select>
        间隔多少 单位
        <el-select size="small" style="width: 70px" v-model="dateUnit">
          <el-option
            v-for="item in dateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
  import formula from './formula.vue';
  import mixcontent from './mixcontent';
  import mixdate from './mixdate';
  import _ from 'lodash';
  import { formulas } from '../index';
  export default {
    mixins: [mixcontent, mixdate],
    components: {
      formula
    },
    mounted() {
      const { showContent, formulaType } = this.item;
      if (formulaType === formulas.timeDifference && showContent) {
        this.showContent = showContent;
      } else {
        this.showContent = this.formatContent('时间范围');
      }
    },
    watch: {
      firstDateProp(prop) {
        const firstObj = this.getDateLabel(prop, true);

        this.showContent = this.formatContent(firstObj.str || '时间范围');
      },
      showContent(val) {
        this.$emit('on-date', {
          showContent: val,
          firstDateProp: this.firstDateProp,
          secondDateProp: this.secondDateProp,
          dateUnit: this.dateUnit
        });
      }
    },
    methods: {
      formatContent(first) {
        let dateUnitStr = '年';
        const obj = _.filter(this.dateOptions, { value: this.dateUnit });

        if (obj.length) {
          dateUnitStr = obj[0].label;
        }
        return `${this.getLabel(first)} 间隔 ${this.getLabel(
          `(${dateUnitStr})`
        )}`;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import 'modal';
</style>
